<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级元素与行内元素</title>
    <style>
        div {
            width: 100%;
            background: yellow;
            height: 100px;
            text-align: center;
            line-height: 100px;
            word-spacing: -6px;
        }

        a {
            color: #fff;
            text-decoration: none;
            /* 居中垂直并去掉左右间隔*/
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            background: red;
        }
    </style>
</head>

<body>
    <!-- 笔记 
     行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
     块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。

     块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。

     盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

    inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。
    
     关于line-height  https://www.cnblogs.com/dolphinX/p/3236686.html  涉及内连元素的单行垂直居中与多行垂直居中
    -->
    <div>
        <a href="">我是a1</a>
        <a href="">我是a2</a>
        <a href="">我是a3</a>
        <a href="">我是a4</a>
    </div>
    <!-- a标签有时设置为display: block 有时为inline-block
    inline元素、block元素、inline-block元素的区别
块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。

块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。

块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。

    -->
</body>

</html>